<!--
  Generated template for the MainPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar hideBackButton="false" color="mainColor">
    <ion-title>泛课堂</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <div class="tab">
    <!--上层-->
    <div>
      <!--上层左-->
      <div>
        <div (click)="exercises()">
          <span class="spirt xiti">

          </span>
          习题
          <span class="badge">66</span>
        </div>
        <div (click)="resourse()">
          <span class="spirt ziyuan">

          </span>
          资源
        </div>
      </div>
      <!--上层右-->
      <div>
        <div (click)="signUp()">
          <span class="spirt qiandao">

          </span>
          签到
        </div>
        <div (click)="allCourse()">
          <span class="spirt quanbu">

          </span>
          全部课程
        </div>
      </div>
    </div>
    <!--下层-->
    <div>
      <div (click)="joinCourse()">
         <span class="spirt jiaru">

          </span>
        <p>加入课程</p>
      </div>
      <div (click)="message()">
        <span class="spirt xiaoxi">

          </span>
        <p>消息</p>
      </div>
    </div>
  </div>
  <div class="list">
    <p>我的课程 <a float-right (click)="moreList()" >更多+</a></p>
    <ul>
      <li [class]="'bg-'+1">
        <div class="course-info">
          <p>
            公共管理学原理
          </p>
          <p>公共管理硕士[MPA系列教材]</p>
          <p>
            <span>
              教师：教师一
            </span>
            <span>
              班级：5班
            </span>
          </p>
        </div>
        <div class="course-code">
          <div>
            <p>邀请码： <span>10086</span></p>
            <p>
              正在进行8单元
            </p>
          </div>
          <ion-icon name="arrow-forward"></ion-icon>
        </div>
      </li>
      <li [class]="'bg-'+2">
        <div class="course-info">
          <p>
            公共管理学原理
          </p>
          <p>公共管理硕士[MPA系列教材]</p>
        </div>
        <div class="course-code">
          <div>
            <p>邀请码： <span>10086</span></p>
            <p>
              正在进行8单元
            </p>
          </div>
          <ion-icon name="arrow-forward"></ion-icon>
        </div>
      </li>
    </ul>
  </div>
</ion-content>
<div class="continue">
  <div>
    <p>
      公共管理学原理
    </p>
    <p>
      第八单元 公共部门人力资源管理
    </p>
  </div>
  <button>
    继续听课
  </button>
</div>
